<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="bottom">
        <view class="items">
          <text class="til">账号:</text>
          <input class="val" :value="itemList.account" disabled placeholder="请输入" />
        </view>
        <view class="items">
          <text class="til">原始密码:</text>
          <input class="val" v-model="itemList.originalPwd" placeholder="请输入" />
        </view>
        <view class="items">
          <text class="til">新密码:</text>
          <input class="val" v-model="itemList.newPwd" placeholder="请输入" />
        </view>
        <view class="items">
          <text class="til">确认密码:</text>
          <input class="val" v-model="itemList.againPwd" placeholder="请输入" />
        </view>
      </view>
    </view>
    <view class="footer">
      <button type="primary" @click="handleClick">确认</button>
    </view>
  </view>
</template>

<script>
  import { toast } from '@/utils/common';
  export default {
    driverName: 'resetPwd',
    props: {},
    data() {
      return {
        itemList: {
          account: this.$store.state.user.name,
          originalPwd: undefined,
          newPwd: undefined,
          againPwd: undefined
        }
      };
    },
    methods: {
      handleClick() {
        if (!this.itemList.originalPwd) {
          toast('请输入原始密码');
          return;
        }
        if (!this.itemList.newPwd) {
          toast('请输入新密码');
          return;
        }
        if (!this.itemList.againPwd) {
          toast('请输入确认密码');
          return;
        }
        if (this.itemList.newPwd !== this.itemList.againPwd) {
          toast('新密码和确认密码不一致');
          return;
        }
        if (
          this.itemList.originalPwd?.length < 4 ||
          this.itemList.originalPwd?.length > 16 ||
          this.itemList.newPwd?.length < 4 ||
          this.itemList.newPwd?.length > 16
        ) {
          toast('密码长度必须在4到16位之间');
          return;
        }
        let data = {
          oldPassword: String(this.itemList.originalPwd),
          password: String(this.itemList.newPwd)
        };
        this.$store.dispatch('UpdateUserPwd', data).then((res) => {
          if (res.code == 0 && res.data) {
            toast('重置密码成功');
            setTimeout(() => {
              this.$tab.reLaunch('/pages/mine/index');
            }, 1000);
          } else {
            toast(res.msg);
          }
        });
      },
      parseTime(time, pattern) {
        if (arguments.length === 0 || !time) {
          return null;
        }
        const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
        let date;
        if (typeof time === 'object') {
          date = time;
        } else {
          if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
            time = parseInt(time);
          } else if (typeof time === 'string') {
            time = time
              .replace(new RegExp(/-/gm), '/')
              .replace('T', ' ')
              .replace(new RegExp(/\.[\d]{3}/gm), '');
          }
          if (typeof time === 'number' && time.toString().length === 10) {
            time = time * 1000;
          }
          date = new Date(time);
        }
        const formatObj = {
          y: date.getFullYear(),
          m: date.getMonth() + 1,
          d: date.getDate(),
          h: date.getHours(),
          i: date.getMinutes(),
          s: date.getSeconds(),
          a: date.getDay()
        };
        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
          let value = formatObj[key];
          // Note: getDay() returns 0 on Sunday
          if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value];
          }
          if (result.length > 0 && value < 10) {
            value = '0' + value;
          }
          return value || 0;
        });
        return time_str;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .phxx-item {
    height: calc(100vh - 20px);
    box-sizing: border-box;
    margin: 15px;
    font-size: 15px;
    color: #000;

    .phxx-item-content {
      background: #fff;
      padding: 10rpx 30rpx;
      border-radius: 15px;

      .bottom {
        padding: 10rpx 0 0 0;

        >.items {
          padding-bottom: 6rpx;
          display: flex;
          align-items: center;
          padding-top: 15px;
          border-bottom: 1px solid #E6E6E6;
        }

        >view:last-child {
          border-bottom: 0 !important
        }

        /* .btn {
          button {
            width: 100%;
            height: 40px !important;
            margin-top: 45px;
            line-height: 40px !important;
          }
        } */

        .til {
          width: 25%;
          display: inline-block;
        }

        .val {
          margin-left: 30rpx;
          width: 75%;
          display: inline-block;
          border-radius: 5px;
          height: 30px;
        }
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      padding: 10px 13px 35px 13px;

      button {
        width: calc(100% - 26px) !important;
        height: 45px !important;
        line-height: 40px !important;
      }
    }
  }
</style>